<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>客服抢单</title>
    <link href="${pageContext.request.contextPath}/static/layui/css/layui.css" type="text/css" rel="stylesheet">
</head>
<body>
<form>
    <div class="demoTable">
        搜索：
        <div class="layui-inline">
            <input class="layui-input" name="userName" id="userName" autocomplete="off" placeholder="输入处理人">
        </div>
        <div class="layui-inline">
            <input class="layui-input" name="title" id="title" autocomplete="off" placeholder="请输入主题">
        </div>
        <select data-type="reload" id="state" name="state" lay-verify="required" autocomplete="off"
                class="layui-select">
            <option value="-1">请选择工单状态</option>
            <option value="1">用户等待答复</option>
            <option value="2">已答复用户</option>
            <option value="3">已完结</option>
        </select>
        <input type="hidden" name="isAllot" id="isAllot">
        <input type="hidden" name="isUreplay" id="isUreplay">
        <input type="hidden" name="isSreplay" id="isSreplay">
        <input type="hidden" name="isFinish" id="isFinish">
        <button class="layui-btn" data-type="reload" type="button">搜索</button>
    </div>
    <table id="order-from" lay-filter="test"></table>
</form>
<script src="${pageContext.request.contextPath}/static/js/jquery3.4.1.js"></script>
<script src="${pageContext.request.contextPath}/static/layer/layer.js"></script>
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;
    });
</script>
<%--表单右侧工具栏--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="check">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="upload">下载附件</a>
</script>
<script>
    layui.use('table', function () {

        var table = layui.table;
        let form = layui.form;
        //第一个实例
        table.render({
            elem: '#order-from'
            , url: '${pageContext.request.contextPath}/order/getOrders.handler?staffName=${staffInfo.nickName}&isAllot=1' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {
                    field: 'id', title: '编号', width: "10%", sort: true, templet: function (d) {
                        return d.id;
                    }
                },
                {
                    field: 'createTime', title: '创建时间', width: "10%", sort: true, templet: function (d) {
                        return dateFormat("YY-mm--dd", new Date(d.createTime));
                    }
                },
                {
                    field: 'nowTime', title: '最新时间', width: "10%", sort: true, templet: function (d) {
                        return dateFormat("YY-mm--dd", new Date(d.nowTime));
                    }
                },
                {
                    field: 'title', title: '主题', width: "20%", templet: function (d) {
                        return d.title;
                    }
                },
                {
                    field: 'userName', title: '用户', width: "10%", templet: function (d) {
                        return d.user.nickName;
                    }
                },
                {
                    field: 'state', title: '工单状态', width: "10%", templet: function (d) {
                        let isAllot = d.isAllot;
                        let isUreplay = d.isUreplay;
                        let isSreplay = d.isSreplay;
                        let isFinish = d.isFinish;
                        if (isFinish == 1 && isAllot == 1) {
                            return "已完结"
                        } else if (isUreplay == 1 && isSreplay == 0) {
                            return "用户等待答复"
                        } else if (isUreplay == 0 && isSreplay == 1) {
                            return "已答复用户"
                        }
                    }
                },
                {field: 'ishaving', title: '有无上传附件', width:"10%",templet:function (d) {
                        return d.path != null?"有附件上传":"无附件上传";
                    }},
                {fixed: 'right', title: '操作', width: "15%", align: 'center', toolbar: '#barDemo'}
            ]],
            id: "user-form"
        });

        //顶部筛选监听
        var $ = layui.$, active = {
            reload: function () {
                //执行重载
                table.reload('user-form', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        userName: $("#userName").val() == "" ? null : $("#userName").val(),
                        title: $("#title").val() == "" ? null : $("#title").val(),
                        isAllot: $("#isAllot").val() == "null" ? null : $("#isAllot").val(),
                        isUreplay: $("#isUreplay").val() == "null" ? null : $("#isUreplay").val(),
                        isSreplay: $("#isSreplay").val() == "null" ? null : $("#isSreplay").val(),
                        isFinish: $("#isFinish").val() == "null" ? null : $("#isFinish").val(),
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $('#state').on('change', function () {
            let state = $(this).val();
            if (state != -1) {
                if (state == 1) { //等待客服答复
                    $("#isAllot").val("1");
                    $("#isUreplay").val("1");
                    $("#isSreplay").val("0");
                    $("#isFinish").val("0");
                } else if (state == 2) {// 客服已经答复
                    $("#isAllot").val("1");
                    $("#isUreplay").val("0");
                    $("#isSreplay").val("1");
                    $("#isFinish").val("0");
                } else if (state == 3) { //完结
                    $("#isAllot").val("1");
                    $("#isFinish").val("1");
                    $("#isUreplay").val("null");
                    $("#isSreplay").val("null");
                }
            } else {
                $("#isAllot").val("null");
                $("#isUreplay").val("null");
                $("#isSreplay").val("null");
                $("#isFinish").val("null");
            }

            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            let data = obj.data;
            let staffId = ${staffInfo.id}; //客服id
            let id = data.id; //文件id
            let userName = data.user.nickName; //用户

            if (obj.event === 'check') {
                let orderId = data.id;
                let isAllot = data.isAllot;
                layer.open({
                    type: 2,
                    title: '回复',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['820px', '760px'],
                    content: '${pageContext.request.contextPath}/staffPage/sendInfo.handler?orderId='+orderId,
                    end:function () {
                        //执行重载
                        layui.table.reload('user-form', {
                            where: {
                                staffName:$("#staffName").val()==""?null:$("#staffName").val(),
                                title:$("#title").val()==""?null:$("#title").val(),
                                isAllot:$("#isAllot").val()=="null"?null:$("#isAllot").val(),
                                isUreplay:$("#isUreplay").val()=="null"?null:$("#isUreplay").val(),
                                isSreplay:$("#isSreplay").val()=="null"?null:$("#isSreplay").val(),
                            }
                        }, 'data');
                    }
                });
            } else if (obj.event === 'upload') {
                let path = data.path;
                if (path != null) {
                    let url = "${pageContext.request.contextPath}/file.handler?path=" + path;
                    window.open(url);
                } else {
                    layer.msg('该工单未上传附件');
                }
            }
            ;
        });
    });
</script>
</body>
<%--时间格式转换--%>
<script>
    function dateFormat(fmt, date) {
        let ret;
        const opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            }
            ;
        }
        ;
        return fmt;
    }
</script>
</html>
